<script setup>
import { ref } from 'vue';

// 表单数据
const formData = ref({
  mobile: '13212345678',
  habbit: '',
  password: 'abc12345',
  alt: '关于我的描述',
  code: '6666'
});

// 表单验证规则
const formRules = {
  // key 需要和 数据的属性名 以及 设置的 name 属性相同
  mobile: {
    // 校验规则，数组的形式来设置，可以设置多个规则
    rules: [
      // required 必填
      // errorMessage 错误信息
      // pattern 正则表达式
      // 绝大多数网站中对于手机号的校验，非常的不严格（松散） why?
      // 尽可能快的 拥有你这个用户，手机号大部分都只做非空校验
      { required: true, errorMessage: '手机号都不写，你个小可爱~' },
      { pattern: '^[1][3-8][0-9]{9}$', errorMessage: '手机号码格式不正确' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: '请输入密码' },
      { pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' }
    ]
  },
  code: {
    rules: [
      { required: true, errorMessage: '验证码不能为空哦，小傻瓜' },
      // 正则中的\ 需要加多一个 \ 转义一下
      { pattern: '^\\d{4}$', errorMessage: '验证码的格式不正确' }
    ]
  }
};

// 定义表单
const form = ref();

const submitData = async () => {
  // console.log(formData.value);
  // console.log(form.value);
  // 根据设置的校验规则 去校验对应的属性值
  try {
    const res = await form.value.validate();
    console.log(res);
  } catch (e) {
    //TODO handle the exception
    console.log(e);
  }
};
</script>

<template>
  <!-- 表单容器 -->
  <uni-forms ref="form" label-width="0" :rules="formRules" :model="formData">
    <!-- 表单项 -->
    <uni-forms-item name="mobile">
      <!-- 输入区域 -->
      <uni-easyinput type="text" :clearable="false" v-model="formData.mobile" placeholder="请输入手机号" />
    </uni-forms-item>
    <uni-forms-item name="password">
      <uni-easyinput type="password" :clearable="false" v-model="formData.password" placeholder="请输入密码" />
    </uni-forms-item>
    <uni-forms-item>
      <!-- 输入区域 -->
      <uni-easyinput type="text" :clearable="false" v-model="formData.habbit" placeholder="请输入你的爱好" />
    </uni-forms-item>
    <uni-forms-item name="code">
      <!-- 输入区域 -->
      <uni-easyinput type="text" :clearable="false" v-model="formData.code" placeholder="请输验证码" />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput type="textarea" v-model="formData.alt" :clearable="false" />
    </uni-forms-item>
  </uni-forms>
  <button class="uni-button" @click="submitData" type="primary">提交</button>
</template>
